<template>
  <div :style="{
    width: proxy.$size(width, '100%'),
  }">
    <el-slider v-model="keyword" v-bind="{
      range: Array.isArray(keyword),//是否开启选择范围
      ...$attrs,
      disabled: typeof $attrs.disabled === 'function' ? $attrs.disabled(data) : $attrs.disabled
    }" />
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data: any;
    dataName?: any;
    width?: string | number;
    searchBtn?: Function;
    addBtn?: Function;
  }>(),
  {

  },
);
const keyword = computed({
  get() {
    return props.dataName ? props.data[props.dataName] : props.data;
  },
  set(val) {
    console.log(val);
    if (props.dataName) {
      props.data[props.dataName] = val
    } else {
      props.data = val;
    }
  },
});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', item: any, form: any): void;
}>();
const changeBtn = (item: any) => {
  emit('changeBtn', item, props.data)
};
onMounted(() => {

});
</script>
<style scoped lang="scss"></style>
